<script setup lang="ts">
defineOptions({
  name: 'AppVipOrRebateHeader',
})
const curTab = inject<globalThis.Ref<number>>('curTab', ref(0))

const route = useRoute()
const { isLogin, userInfo, currentGlobalCurrency, isVipOpen, rebateAutomatic } = storeToRefs(useAppStore())
const {
  currentLevel,
  score,
  progress,
  isMaxLevel,
  isKeepLevelOpen,
  isVipPointMode,
  isHaveRetainConfig,
  isHaveDepositRetainConfig,
  currencyModeCur,
} = useVipInfo()
const { runAsync: runAsyncVipScoreConfig, data: dataVipScoreConfig }
    = useRequest(ApiMemberVipScoreConfig)

const isPop = ref(false)
// const vipBonusId = ref('')
// const bonusType = ref('')
// 是否同时有保级充值和保级打码
const isVipBonusId = computed(() => {
  if (curTab.value < 1)
    return '-1'
  return ''
})
const isBonusType = computed(() => {
  if (curTab.value < 1)
    return '818'
  return ''
})
const isShowReceive = computed(() => {
  if (curTab.value === 2)
    return false
  return true
})

const headerText = computed(() => {
  if (curTab.value < 1)
    return $t('vip_promotion_bonus')
  return $t('vip_vip_bonus')
})
const isHaveTwoProgress = computed(
  () => isHaveRetainConfig.value && isHaveDepositRetainConfig.value,
)
// 预期返水的card只在返水页面显示
const isRebatePage = computed(() => route.path.includes('/rebate-center/rebate'))
const isRebateRecordPage = computed(() => route.path.includes('/rebate-center/record'))
const _progressString = computed(() => (+progress.value > 100 ? 100 : Number(progress.value)))
const isShowRebateCenterBanner = computed(() => rebateAutomatic.value && rebateAutomatic.value.mode === '2')

// 显示vip bar
const isShowVipInfoBar = computed(() => {
  if (isRebatePage.value || isRebateRecordPage.value)
    return !isShowRebateCenterBanner.value
  return isVipOpen.value
})

// 展示反水按钮
const showRebateBtn = computed(() => {
  if (!isLogin.value)
    return true

  if (rebateAutomatic.value) {
    return (+rebateAutomatic.value.automatic === 1
      ? false
      : ((!(route.path.includes('/vip')) && !isRebateRecordPage.value && isRebatePage.value)) && userInfo.value && +userInfo.value.rebate_state === 1 && +userInfo.value.bonus_state === 1)
  }
  return false
})
// 展示领取奖金按钮
const showBonusBtn = computed(() => {
  if (!isLogin.value)
    return true

  return userInfo.value && +userInfo.value.bonus_state === 1 && (!(isRebatePage.value || isRebateRecordPage.value || route.path.includes('/vip/receive')))
})

// 保级打码进度
const progressRetain = computed(() => {
  if (userInfo.value && currentLevel.value) {
    if (+currentLevel.value.retain === 0)
      return 100
    const p = mul(+toFixed(+userInfo.value.retain / +currentLevel.value.retain, 4), 100)
    return +p > 100 ? 100 : +p
  }
  return 0
})
// 保级充值进度
const progressDepositRetain = computed(() => {
  if (userInfo.value && currentLevel.value) {
    if (+currentLevel.value.deposit_retain === 0)
      return 100
    const p = mul(
      +toFixed(+userInfo.value.deposit_retain / +currentLevel.value.deposit_retain, 4),
      100,
    )
    return +p > 100 ? 100 : +p
  }
  return 0
})
function onReceive() {
  isPop.value = true
}

watch(
  () => currentGlobalCurrency.value,
  (newVal) => {
    runAsyncVipScoreConfig({
      cur: currencyConfig[newVal].cur,
    })
  },
)

runAsyncVipScoreConfig({
  cur: currencyConfig[
    isLogin.value
      ? currentGlobalCurrency.value
      : languageConfig[getCurrentLanguageForFrontend()].currency
  ].cur,
})
</script>

<template>
  <div v-if="rebateAutomatic" class="size-full relative">
    <AppRebateCenterBanner v-if="(isRebatePage || isRebateRecordPage) && isShowRebateCenterBanner && isLogin" :show-rebate-btn="Boolean(showRebateBtn)" />

    <template v-if="isShowVipInfoBar">
      <!-- 领取按钮 -->
      <div v-show="isShowReceive && showBonusBtn" class="vip-receive shrink-0" @click="onReceive">
        <div
          class="text-black font-semibold absolute -translate-x-[14%] right-[14%] top-[50%] -translate-y-[50%]"
        >
          {{ $t('receive') }}
        </div>
      </div>
      <div class="vip-card p-2.5" :class="{ 'vip-card-clip': isShowReceive && showBonusBtn }">
        <!-- 头 -->
        <div class="flex items-center mb-2">
          <div class="mr-2">
            <BaseImage url="/images/webp/vip/vip-avatar.webp" class="w-12.5 shrink-0 aspect-auto" />
          </div>
          <div class="text-[#24EE89] text-base font-semibold uppercase">
            VIP{{ userInfo?.vip ?? '0' }}
          </div>
        </div>

        <!-- 当前 -->
        <div class="w-full">
          <div class="mb-2 leading-[17px]">
            <span v-if="isMaxLevel">{{ $t('vip_current_points_top') }}</span>
            <span v-else>
              <span v-if="isVipPointMode" class="text-[#B3BEC1]">
                {{ $t('vip_current_points')
                }}<span class="text-[#24EE89] font-semibold ml-1">{{
                  parseInt(score.toString())
                }}</span>
              </span>
              <span v-else class="flex items-center text-[#B3BEC1]">
                {{ $t('vip_current_bets')
                }}<span class="text-[#24EE89] font-semibold mx-1">{{
                  parseInt(score.toString())
                }}</span>
                <AppCurrencyIcon
                  v-if="currencyModeCur"
                  :currency-type="currencyModeCur"
                  style="--tg-app-currency-icon-size: 12px"
                />
              </span>
            </span>
          </div>
          <!-- 进度条 -->
          <BaseProcess :percent="_progressString" />
          <div class="mt-1 leading-[17px] text-[#B3BEC1] text-xs font-semibold">
            <span v-show="dataVipScoreConfig && isVipPointMode">
              {{
                dataVipScoreConfig?.value.replace(
                  ',',
                  `${dataVipScoreConfig?.key === '704' ? `${getCurrencyConfigByCode(dataVipScoreConfig?.key ?? '706').name}` : getCurrencyConfigByCode(dataVipScoreConfig?.key ?? '706').name}=`,
                )
              }}{{ $t('integral') }}
            </span>
          </div>
        </div>
        <template v-if="isKeepLevelOpen && (isHaveRetainConfig || isHaveDepositRetainConfig)">
          <!-- 线 -->
          <div class="line h-[1px] my-2 bg-[rgba(255,255,255,0.10)]" />

          <!-- 保级 -->
          <div v-if="isHaveDepositRetainConfig">
            <div class="text-[#B3BEC1] font-semibold">
              {{ $t('vip_keep_level_deposit')
              }}<span class="text-[#24EE89] pl-1 font-semibold">{{
                currentLevel?.deposit_retain
              }}</span>
            </div>
          </div>
          <div v-if="isHaveRetainConfig && !isHaveDepositRetainConfig">
            <div class="text-[#B3BEC1] font-semibold">
              {{ isVipPointMode ? $t('keep_integral') : $t('vip_keep_level_bets')
              }}<span class="text-[#24EE89] pl-1 font-semibold">{{ currentLevel?.retain }}</span>
            </div>
          </div>

          <!-- 2个进度条背景 -->
          <div class="progress-bg relative h-3 w-full flex my-1">
            <!-- 保级充值 -->
            <div
              v-if="isHaveDepositRetainConfig"
              class="progress-blue h-full rounded-[20px] text-center leading-[1]"
              :class="{ isHaveTwoProgress }"
              :style="{
                width: isHaveTwoProgress
                  ? `${(progressDepositRetain / 2).toFixed(2)}%`
                  : `${progressDepositRetain}%`,
              }"
            >
              <span
                class="font-medium text-white"
                :class="[isHaveTwoProgress ? '' : 'absolute left-[50%] -translate-x-[50%]']"
              >
                {{ progressDepositRetain }}%
              </span>
            </div>

            <!-- 保级打码 -->
            <div
              v-if="isHaveRetainConfig"
              class="progress-red h-full rounded-[20px] text-center leading-[1]"
              :class="{ isHaveTwoProgress }"
              :style="{
                width: isHaveTwoProgress
                  ? `${(progressRetain / 2).toFixed(2)}%`
                  : `${progressRetain}%`,
              }"
            >
              <span
                class="font-medium text-white"
                :class="[isHaveTwoProgress ? '' : 'absolute left-[50%] -translate-x-[50%]']"
              >
                {{ progressRetain }}%
              </span>
            </div>
          </div>
          <div v-if="isHaveTwoProgress">
            <div class="text-[#B3BEC1] font-semibold">
              {{ isVipPointMode ? $t('keep_integral') : $t('vip_keep_level_bets')
              }}<span class="text-[#24EE89] pl-1 font-semibold">{{ currentLevel?.retain }}</span>
            </div>
          </div>
          <div
            v-if="isHaveTwoProgress"
            class="flex items-center justify-center text-[#B3BEC1] font-semibold"
          >
            <div
              class="w-2.5 rounded-xl mr-2 h-1.5 bg-gradient-to-r from-[#21A8F7] to-[#21F3F7]"
            />
            <div class="mr-3">
              {{ $t('charge') }}
            </div>
            <div
              class="w-2.5 rounded-xl mr-2 h-1.5 bg-gradient-to-r from-[#FF4810] to-[#FF9500]"
            />
            <div>{{ isVipPointMode ? $t('integral') : $t('vip_add_mosaic') }}</div>
          </div>
        </template>
      </div>
      <BaseBob v-model:show="isPop" :header="headerText">
        <AppGetVipBonus :vip-bonus-id="isVipBonusId" :bonus-type="isBonusType" :currency-id="dataVipScoreConfig?.key" @close-pop="isPop = false" />
      </BaseBob>
    </template>
  </div>
</template>

<style scoped lang="scss">
  .vip-card {
    position: relative;
    width: 100%;
    background:
      linear-gradient(
        91deg,
        rgba(149, 255, 236, 0) 0%,
        rgba(149, 255, 236, 0) 0.53%,
        rgba(115, 175, 168, 0.2) 98.77%
      ),
      #323738;
    border-radius: 8px;
    &-clip{
      clip-path: polygon(0% 0%, 52% 0%, 59% 2.775rem, 100% 2.775rem, 100% 100%, 0% 100%);
    }
  }
  .vip-receive {
    position: absolute;
    width: 100%;
    height: 2.5rem;
    background: linear-gradient(90deg, #24ee89 0%, #9fe871 100%);
    border-radius: 0 4px 4px 0;
    box-shadow: 0px -2px 0px 0px #1dca6a inset;
    clip-path: polygon(53.5% 0%, 100% 0%, 100% 2.6rem, 2.6rem 100%, 59.5% 101%);
  }
  .progress-bg {
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
  .progress-blue {
    background-image: linear-gradient(90deg, #21a8f7 0%, #21f3f7 100%);

    &.isHaveTwoProgress {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
  }

  .progress-red {
    background-image: linear-gradient(90deg, #ff4810 0%, #ff9500 100%);

    &.isHaveTwoProgress {
      position: relative;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;

      ::before {
        content: '';
        position: absolute;
        left: -1px;
        top: 0;
        width: 0.375rem;
        height: 0.75rem;
        background: #21f3f7;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
      }
    }
  }
</style>
